<template>
  <el-container>
    <el-main>
      <div class="login">
        <div class="login-wrap">
          <el-dialog :visible.sync="dialogVisible" width="400px" modal lock-scroll :close-on-click-modal="false"
            :show-close="false" center :append-to-body="true" v-loading="loading" v-show="show">
            <el-card shadow="always">
              <el-form ref="loginForm" :model="user" :rules="rules" status-icon label-width="80px">
                <h3>管理员登录</h3>
                <hr>
                <el-form-item prop="username" label="用户名">
                  <el-input v-model="user.username" placeholder="请输入用户名" prefix-icon></el-input>
                </el-form-item>
                <el-form-item id="password" prop="password" label="密码">
                  <el-input v-model="user.password" show-password placeholder="请输入密码"></el-input>
                </el-form-item>

                <el-form-item class="button">
                  <el-button type="primary" icon="el-icon-upload" @click="doLogin()">登 录</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-dialog>

        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import md5 from 'js-md5';
export default {
  name: "login",
  data() {
    return {
      user: {
        username: "",
        password: ""
      },
      dialogVisible: true,
      loading: false,
      show: true
    };
  },
  created() {
  },
  init() {


  },
  methods: {
    doLogin() {
      if (!this.user.username) {
        this.$message.error("请输入用户名！");
      } else if (!this.user.password) {
        this.$message.error("请输入密码！");
      } else {
        this.axios({
        method: "GET",
        url: "https://admin.xiaoheihe.work/bapi/getSalt/"+this.user.username,
      }).then((response) => {
        let salt = response.data
        this.axios({
          method: "POST",
          url: "https://admin.xiaoheihe.work/bapi/login2",
          data: {
            "username": this.user.username,
            "password": md5(this.user.password+salt),
          }
        })
          .then(res => {
            this.loading = true;
            if (res.status === 200) {

              this.$store.dispatch("userLogin", true);

              localStorage.setItem("Flag", "isLogin");

              this.$message({
                type: 'info',
                message: `登陆成功！`
              });
              // alert("登录成功！");
              this.loading = false;
              this.dialogVisible = false;
              //设置vuex登录状态为已登录
              this.axios({
                method: "GET",
                url: "https://admin.xiaoheihe.work/bapi/me",

              }).then((response) => {
                console.log(response.data);
                this.$store.commit('adminLogin', response.data.username);

              })
              //如果登录标志不存在，即未登录

              console.log("succeed")
              this.$router.push({ path: "/index" });
            } else {
              this.loading = false;

              this.$message({
                type: 'error',
                message: `您输入的用户名或密码错误，请联系管理员！`
              });
              // alert("您输入的用户名或密码错误，请联系管理员！");
            }
          }).catch(error => {
            alert(error.response.data)
          });
      }).catch((error)=>{
        this.showLoading = false;
        if (error.response.status === 405) {
          this.isUserError = true;
          Toast.fail(error.response.data)
        }
      });




        
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#password {
  margin-bottom: 5px;
}

.button {
  width: 300px;
  padding-top: 5%;
}

.login {
  margin-bottom: 10%;
  height: 400px;
}

h3 {
  color: #0babeab8;
  font-size: 24px;
}

hr {
  background-color: #444;
  margin: 20px auto;
}

a {
  text-decoration: none;
  color: #aaa;
  font-size: 15px;
}

a:hover {
  color: coral;
}

.el-button {
  width: 80%;
  margin-left: 10px;
}
</style>
